<template>
    <div class="content">
        <div class="content-top">
            <div class="title">{{i.name}}</div>
            <div class="person-info">
                <div class="portrait">
                    <img src="~images/portrait.png" alt="banner"/>
                </div>
                <div class="info-text">
                    <div class="name">小美</div>
                    <div class="department">用户体验部门</div>
                </div>
            </div>
        </div>
        <div class="content-middle">
            <div class="content-middle-left">
                <div class="old-edition" @click="showDetail">
                    <div class="old-edition-pc" v-if="i.type === 'pc'"></div>
                    <div class="old-edition-mobile" v-else-if="i.type === 'mobile'"></div>
                    <div class="old-edition-component" v-else></div>
                </div>
                <div class="edition-text">新版</div>
                <div class="edition-describe">首先选择与对应物品分开，造成视觉上的割裂感，他们应该是一个整体。其次整体版面不够平衡，重点信息不够突出，其次在勾选时其实就已经可以选择数量了</div>
                <div class="date-num">2020.09.20 编号001</div>
            </div>
            <div class="content-middle-right">
                <div class="new-edition" @click="showDetail">
                    <div class="new-edition-pc" v-if="i.type === 'pc'"></div>
                    <div class="new-edition-mobile" v-else-if="i.type === 'mobile'"></div>
                    <div class="new-edition-component" v-else></div>
                </div>
                <div class="edition-text">旧版</div>
                <div class="edition-describe">重新排版了整体视觉流线，让用户的视线呈现“F”型，能够最快速的捕捉到相关的信息，减少用户视线的来回跳动，缩短用户获取想要信息所需要的时间。</div>
                <div class="date-num">2020.09.20 编号001</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Content',
    props: {
        i: {
            type: Object,
            default: () => {}
        },
        index: {
            type: Number,
            default: 0
        }
    },
    methods: {
        showDetail() {
            this.$emit('showDetail', this.index)
        }
    }
};
</script>

<style scoped lang="less">
.content{
    width: 1200px;
    margin: 60px auto 0 auto;
    border-bottom: 1px solid #E4E6E7;
    &-middle{
        display: flex;
        justify-content: space-between;
        &-left, &-right{
            width: 580px;
        }
        .old-edition{
            border-bottom: 3px solid #F54E45;
            .old-edition-pc,.old-edition-mobile,.old-edition-component{
                background-color: #FFD1D1;
            }
        }
        .new-edition{
            border-bottom: 3px solid #0091FF;
            .new-edition-pc,.new-edition-mobile,.new-edition-component{
                background-color: #9ED5FF;
            }
        }
        .old-edition,.new-edition{
            height: 372px;
            background-color: #EBF0F6;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            &:hover{
                box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.07);
            }
            .old-edition-pc,
            .new-edition-pc{
                width: 530px;
                height: 300px;
            }
            .old-edition-mobile,
            .new-edition-mobile{
                width: 148px;
                height: 320px;
            }
            .old-edition-component,
            .new-edition-component{
                width: 274px;
                height: 145px;
            }

        }
        .date-num{
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            color: #646C73;
            line-height: 17px;
            padding-top: 21px;
            padding-bottom: 50px;
        }
        .edition-describe{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #646C73;
            line-height: 22px;
            margin-top: 13px;
        }
        .edition-text{
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC,serif;
            font-weight: 600;
            color: #1F2529;
            line-height: 25px;
            margin-top: 21px;
            padding-bottom: 15px;
            width: 116px;
            border-bottom: 1px solid #E4E6E7;
        }
    }
    &-top {
        display: flex;
        align-items: center;
        padding-bottom: 42px;
        .person-info{
            display: flex;
            align-items: center;
            .info-text{
                .name{
                    font-size: 14px;
                    font-family: PingFangSC-Semibold, PingFang SC,serif;
                    font-weight: 600;
                    color: #1F2529;
                    line-height: 20px;
                }
                .department{
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC,serif;
                    font-weight: 400;
                    color: #646C73;
                    line-height: 17px;
                }
            }
            .portrait{
                width: 37px;
                height: 36px;
                margin-right: 12px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .title {
            // width: 258px;
            padding-right: 28px;
            height: 45px;
            font-size: 32px;
            font-family: PingFangSC-Semibold, PingFang SC, serif;
            font-weight: 600;
            color: #1F2529;
            line-height: 45px;
        }
    }
}
</style>
